<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <!-- 1.按顺序引入vue和vue-route的js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>
<body>
    <div id='app'>
        <!-- 2.创建路由跳转连接，router-link就相当于a连接标签，to就相当于a连接的href属性 -->
        <router-link to="/index">index</router-link>
        <router-link to="/post">post</router-link>
        <router-link to="/category">category</router-link>


        <!-- 3.占坑位，用于展示路由组件中的模板 -->
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        // 4.创建组件
        const index = {
            template: `<h1>主页页面</h1>`
        }
        const post = {
            template: `
                <div>
                    <h1>文章列表页面</h1>
                    <hr>

                    <router-link to="/post/keji">科技</router-link>
                    <router-link to="/post/junshi">军事</router-link>
                    
                    <router-view></router-view>
                </div>
            `
        }

        const category = {
            template: `
                <div>
                    <h1>分类页面</h1>
                    <hr>
                    <router-link to="/category/lvyou">旅游</router-link>
                    <router-link to="/category/life">生活</router-link>

                    <router-view/>
                </div>
            `
        }
        // 定义子路由组件
        const keji = {
            //模板必须使用标签包裹，否则不显示
            template: `<p>这里是科技频道文章</p>`
        }
        const junshi = {
            template: `<p>这里是军事频道文章</p>`
        }
        const cateSon = {
            template: `<p>这是分类模块下========{{$route.params.name}}==========子模块</p>`
        }

        // 5.实例router对象
        var router = new VueRouter({
            routes: [
                //路由重定向redirect的使用
                { path: '/', redirect: '/index'},
                { path: '/index', component: index},
                { path: '/post', 
                    component: post,
                    children: [
                        { path: '/post/keji', component: keji},
                        { path: '/post/junshi', component: junshi}
                    ]
                }, 
                { path: '/category',        //一级分类category组件
                    component: category,
                    children: [
                        { path: '/category/:name', component: cateSon}      //二级分类cateSon组件
                    ]
                }
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            //6.挂载router组件
            router
        });
    </script>
</body>
</html>